<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 300px;
            width: 50%;
        }
    </style>
    <style>
        .c2 {
            display: inline-block;
            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="c1">中国</div>
    <span>adf</span>
    <div>联通</div>
    <span class="c1">dfe</span>
    <!--宽高百分比是相对于父容器的宽高-->
    <!--宽高和垂直方向上的内外边距属性行内标签默认无效-->
    <!--宽高属性块级标签默认有效(同时右侧空白区域也不给占用)-->
    <!--通过一个样式display:inline-block可以让元素以行内块元素(内联块级元素)的方式进行显示-->
    <!--它使得元素既具有行内(内联)元素的特点（如不会独占一行），又具有块级元素的特点（如可以设置宽度和高度）-->
    <span class="c2">中国</span>
    <!--display属性还可以直接将元素显示设置成行内或块级元素样式，不受标签影响-->
    <div style="display:inline;">中国</div>
    <span style="display:block;">联通</span>
</body>

</html>